<script setup lang="ts">
import { ref } from 'vue';
import { defineAsyncComponent } from 'vue';
const Header = defineAsyncComponent(() => import('./components/Header.vue'));
const Login = defineAsyncComponent(() => import('./components/Login.vue'));
const Home = defineAsyncComponent(() => import('./views/Home.vue'));
const Challenges = defineAsyncComponent(() => import('./views/Challenges.vue'));
const Leaderboard = defineAsyncComponent(() => import('./views/Leaderboard.vue'));
const About = defineAsyncComponent(() => import('./views/About.vue'));

const activeView = ref('home');
const isLoggedIn = ref(false);
const currentUser = ref<{ username: string } | null>(null);

const navigateTo = (view: string) => {
  activeView.value = view;
};

// 模拟登录功能，可在后续添加实际登录页面
const handleLogin = (username: string) => {


  // 在实际应用中，这里应该验证凭据并获取令牌
  isLoggedIn.value = true;
  currentUser.value = { username };
  activeView.value = 'home';
};

const handleLogout = () => {
  isLoggedIn.value = false;
  currentUser.value = null;
  activeView.value = 'home';
};
</script>

<template>
  <div class="ctf-container">
    <!-- 根据登录状态显示不同内容 -->
    <template v-if="isLoggedIn">
      <!-- 已登录状态：显示头部、主内容和页脚 -->
      <Header 
        @navigate="navigateTo" 
        :is-logged-in="isLoggedIn" 
        :current-user="currentUser"
        @logout="handleLogout"
      />
      
      <!-- 主内容区域 -->
      <main class="main-content">
        <transition name="fade" mode="out-in">
          <Home v-if="activeView === 'home'" />
          <Challenges v-else-if="activeView === 'challenges'" />
          <Leaderboard v-else-if="activeView === 'leaderboard'" />
          <About v-else-if="activeView === 'about'" />
        </transition>
      </main>
      
      <!-- 页脚 -->
      <footer class="footer">
        <div class="container">
          <p>&copy; 2024 CTF靶场 - 网络安全挑战赛平台</p>
          <p>提升安全技能，挑战网络谜题</p>
        </div>
      </footer>
    </template>
    
    <!-- 未登录状态：只显示登录页面 -->
    <template v-else>
      <Login @login="handleLogin" />
    </template>
  </div>
</template>

<style scoped>
.ctf-container {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 登录页面不需要背景色，由Login组件自己处理 */
}

.main-content {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #2c3e50;
}

.footer {
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 3px solid rgba(255, 255, 255, 0.3);
  padding: 1.5rem 0;
  margin-top: 2em;
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 2em;
}

.footer p {
  margin: 0.5em 0;
  font-size: 0.9em;
  color: white;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>
